前兩天先介紹了為什麼想做 AI 食譜推薦網站，以及我的網站預計會有哪些功能。今天終於要正式開始實作了！
在製作網站之前，我需要先了解最基本的網頁技術，而第一個要學習的就是 HTML。

一、HTML 是什麼？
HTML 的全名是 HyperText Markup Language（超文字標記語言）。
簡單來說，如果把一個網站想像成一間房子，那麼 HTML 就像是房子的「骨架」，負責決定網頁上有哪些內容。
至於網頁的顏色、大小和排版，之後會使用 CSS 處理；而按鈕要怎麼互動，則會交給 JavaScript。
所以今天先不用急著加入 AI，先把網站的基本架構建立起來！

二、建立第一個 AI Recipe 首頁
把這個檔案用瀏覽器開啟後，就可以看到一個非常簡單的網站。
雖然現在看起來還非常陽春，甚至有點像「還沒裝潢的房子」😂，但網站的第一個雛形已經出現了！

三、目前的網站有什麼？
現在我的 AI Recipe 網站已經有三個基本元素：
① 網站標題
顯示「🍳 AI Recipe」，讓使用者知道這個網站是做什麼的。
② 食材輸入框
使用者可以輸入自己目前擁有的食材，例如：
雞蛋、番茄、洋蔥、蔥
之後 AI 就會根據這些食材推薦料理。
③ 開始推薦按鈕
目前按下去還不會真的發生什麼事情，因為 JavaScript 和 AI API 都還沒有加入。
不過這個按鈕會是之後整個網站非常重要的功能。

四、為什麼先學 HTML？
一開始我其實覺得 HTML 好像很簡單，因為只是把文字和按鈕放到網頁上。
但實際開始做之後，我發現先把網站的結構想清楚還是很重要的。
我的網站最後會有：
「輸入食材 → 選擇條件 → 按下推薦 → AI 產生食譜 → 顯示結果」
如果連最基本的輸入框和按鈕都沒有，後面就沒有辦法加入 JavaScript，更不用說串接 AI API 了。
所以今天的目標不是把網站做得多漂亮，而是先把「骨架」蓋起來。
五、今天的成果

今天完成了 AI Recipe 網站的第一個版本：
建立 index.html 認識 HTML 基本結構加入網站標題加入食材輸入框加入推薦按鈕
目前距離真正的 AI 食譜推薦還有一段距離，但至少網站已經正式開始了！
接下來會再使用 CSS 幫網站進行排版和美化，讓它從「工程師測試畫面」慢慢變成真正可以看的網站。